<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单位信息</title>
    <link rel="stylesheet" href="../../plugins/element-ui/theme-chalk/index.css"/>
    <script src="../../js/vue.js" charset="utf-8"></script>
    <script src="../../plugins/element-ui/index.js" charset="utf-8"></script>
    <!-- 引入axios -->
    <script src="../../plugins/axios.min.js"></script>

    <script src="../../js/request.js"></script>
    <script src="../../js/employerInformation.js"></script>
    <style>
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 160px;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }
    </style>
</head>

<body>
<div id="app">
    <template>
       <el-row>
    <el-descriptions  direction="vertical" :column="4" border v-model="employer">
        <el-descriptions-item label="单位名"  >{{employer.name}}</el-descriptions-item>
        <el-descriptions-item label="单位电话" >{{employer.phone}}</el-descriptions-item>
        <el-descriptions-item label="所在城市" :span="2">{{employer.city}}</el-descriptions-item>
        <el-descriptions-item label="规模">
            <el-tag size="small">{{employer.size}}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="联系地址" >{{employer.address}}</el-descriptions-item>
    </el-descriptions>
        </el-row>
        <el-row>
            <el-button type="danger"  @click="update">修改信息</el-button>
        </el-row>

        <!--修改框表单-->
        <el-dialog title="单位信息" :visible.sync="dialogFormVisible" append-to-body  >
            <el-form :model="employer">
                <el-form-item label="单位名称" :label-width="formLabelWidth">
                    <el-input v-model="employer.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="单位电话" :label-width="formLabelWidth">
                    <el-input v-model="employer.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="所在城市" :label-width="formLabelWidth">
                    <el-input v-model="employer.city" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="单位规模" :label-width="formLabelWidth">
                    <el-input v-model="employer.size" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系地址" :label-width="formLabelWidth">
                    <el-input v-model="employer.address" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="exit">修改</el-button>
            </div>
        </el-dialog>


    </template>
</div>
</body>
<script>
    new Vue({
        el:'#app',
        //默认对话框显示状态和宽度
        created() {
            this.init();
        },
        data() {
            return {
                employer: {
                    name:"",
                    size:"",
                    address:"",
                    city:"",
                    phone:"",
                },
                dialogFormVisible: false,
                formLabelWidth: '80px',
            }
        },
        methods:{
            init(){
                const _this=this;
                this.employer.name=localStorage.getItem('user');
                query(this.employer).then(function (res) {
                    _this.employer.size=res.data.size;
                    _this.employer.city=res.data.city;
                    _this.employer.address=res.data.address;
                    _this.employer.phone=res.data.phone;
                })
            },
            //修改
          update(){
              this.dialogFormVisible = true;
           } ,

            exit(){
                const _this=this;
                update(this.employer).then(function (res) {
                    _this.employer=res.data;
                    //判断响应数据是否为success
                    if(String(res.code) === "1"){
                        _this.dialogFormVisible = false;
                        //提示消息
                        _this.$message({
                            message: '修改成功！',
                            type: 'success'
                        })
                    }
                })
            }
        },

    })
</script>
</html>